#{extends 'Content/ContentDetail.html'/}
#{set 'moreStyles'}
        #{stylesheet 'bootstrap.css' /}
#{/set}
#{set 'moreScripts'}
        #{script 'ckeditor/ckeditor.js' /}
#{/set}

#{if flash.error}
	<h2>${flash.error}</h2>
#{/if}
#{if user}
<div>
	<form action="@{Content.create()}" method="POST" enctype="multipart/form-data">
		<input type="hidden" name="description" value=""/>
        <fieldset>
          <legend>Táº¡o BÃ i Viáº¿t</legend>
          
          <div class="clearfix">
            <label for="mediumSelect">Chá»§ Ä�á»�</label>
            <div class="input">
              <select id="category" name="category" class="medium">
               	#{list items: categories, as:'category'}
				 <option value="${category?.alias}">${category?.title}</option>
				#{/list}
              </select>
            </div>
          </div>
          
          
          <div class="clearfix">
            <label for="xlInput">TiÃªu Ä�á»�</label>
            <div class="input">
              <input type="text" size="30" name="title" id="title" class="xlarge">
            </div>
          </div><!-- /clearfix -->
         
         <div class="clearfix">
            <label for="fileInput">áº¢nh Ä�áº¡i Diá»‡n</label>
            <div class="input">
              <input type="file" name="data" class="input-file" accept="image/*">
            </div>
          </div>
         
          <div class="clearfix">
            <label for="textarea">Ná»™i Dung</label>
            <div class="input">
              <textarea rows="3" name="ckeditor" id="ckeditor"></textarea>
              <span class="help-block">
                Block of help text to describe the field above if need be.
              </span>
            </div>
          </div><!-- /clearfix -->

          <div class="clearfix">
            <label id="optionsCheckboxes">áº¨n Danh</label>
            <div class="input">
              <ul class="inputs-list">
                <li>
                  <label>
                    <input type="checkbox" id="invisible" name="invisible">
                    <span>Báº¡n muá»‘n áº©n nick khi gá»Ÿi bÃ i viáº¿t</span>
                  </label>
                </li>
              </ul>
            </div>
          </div>

          
          <div class="clearfix">
            <label id="optionsCheckboxes">Ä�iá»�u Khoáº£n</label>
            <div class="input">
              <ul class="inputs-list">
                <li>
                  <label>
                    <input type="checkbox" value="check_accept" name="check_accept">
                    <span>TÃ´i Ä‘Ã£ Ä‘á»�c vÃ  Ä‘á»“ng Ã½ vá»›i nhá»¯ng <a title="Ä�iá»�u kiá»‡n vÃ  Ä‘iá»�u khoáº£n" class="bodyLink" href="#">Ä�iá»�u kiá»‡n vÃ  Ä‘iá»�u khoáº£n</a> website nhieuchuyen.net</span>
                  </label>
                </li>
              </ul>
            </div>
          </div>
          
          <div class="actions">
            <input type="submit" value="Save changes" class="btn primary" onclick="return checkForm()">&nbsp;<button class="btn" type="reset">Cancel</button>
          </div>
        </fieldset>
      </form>
      <script type="text/javascript">
			function checkForm(){
				var flag = true;
				title = jQuery('input[name="title"]').val();
				check_accept = jQuery('input[name="check_accept"]').attr('checked');
				if(title.length == 0){
					alert("vui lÃ²ng nháº­p thÃ´ng tin chá»§ Ä‘á»�");
					flag = false;
					return flag;
				}
				flag = updateContent();
				if(!flag){
					alert("vui lÃ²ng nháº­p ná»™i dung");
					return flag;
				}
				if(!check_accept){
					alert("báº¡n chÆ°a Ä‘Ã¡nh dáº¥u cháº¥p nháº­n Ä‘iá»�u khoáº£n");
					return false;
				}
				return flag;
			}
      
      		var editor = CKEDITOR.replace('ckeditor');
			function updateContent(){
				var oEditor = CKEDITOR.instances.ckeditor;
				var pageValue = oEditor.getData();
				if(pageValue.length > 0){
					$('input[name=description]').val(pageValue);
					return true;
				}
				return false;
				//alert(pageValue);
			}
      </script>
</div>
#{/if}
#{else}
	<a href="@{Application.login()}" class="big"><img src="@{'/public/images/login.jpeg'}" alt="picture"/>
            <h2>Login with Gmail</h2></a>
#{/else}